<template>
	<div class="goodsdetailsbox">
		<div class="detailsimg">
			<image src="../../static/details/2222.png" mode=""></image>
		</div>
		<div class="detailstext">
			<div class="detailstitle">
				长白母猪_母猪不拼价格拼质量长…
			</div>
			<div class="detailsprice">
				￥ 1088
			</div>
			<div class="detailsabout fsize24">
				长白母猪白母猪长白母猪白母猪长白母猪…
			</div>
		</div>
		<div class="detailssize">
			<div class="sizechoose fsize28">
				<div class="readychoose">
					已选规格
				</div>
				<div class="choosesize">
					长白猪50ml
				</div>
			</div>
			<div class="gotochoose">
				<image src="../../static/details/2222.png" class="choosepng"></image>
				<image src="../../static/details/goto.png" class='gotopng'></image>
			</div>
		</div>
		<div class="detailsmore">
			<div class="detailsmoretitle">
				商品详情
			</div>
			<image src="../../static/details/details2.png" mode=""></image>
		</div>

		<div class="buycar">
			<div class="buyprice">
				<image src="../../static/details/bar.png" mode=""></image>
				<span class='badgecss' v-if='result>0'>{{result}}</span>
				<div class="buypricetxt">￥ 1088</div>
			</div>
			<div class="buybtn fsize32w" @click='gotocategory()'>
				加入购物车
			</div>
		</div>
	</div>


</template>

<script>
	export default {
		data() {
			return {
				hour: 10,
				minute: 50,
				second: 32,
				result:0,
				nums:1,
			};
		},
		onLoad: function() {

		},
		methods: {
			gotocategory(e) {
				uni.switchTab({
					url: '../shoppingcart/shoppingcart'
				})

			},
		}
	}
</script>

<style lang="less">
	.masklayer {
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top:0;
		background: rgba(0,0,0,0.6);
		z-index: 1;
	}
	.goodsdetailsbox {
		background-color: #F0F0F0;
	}

	.detailsimg {
		width: 750rpx;
		height: 750rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.detailstext {
		padding: 0 32rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.detailstitle {
			margin-top: 32rpx;
			width: 518rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-size:32rpx;
			font-weight:500;
			color:rgba(51,51,51,1);
			line-height:48rpx;
		}
		.detailsprice {
			margin-top: 32rpx;
			font-size:36rpx;
			font-weight:500;
			color:rgba(24,108,242,1);
			line-height:50rpx;
		}
		.detailsabout {
			margin-top: 12rpx;
			margin-bottom: 32rpx;
			width: 456rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			line-height:34rpx;
		}
	}
	
	// 规格样式
	.detailssize {
		margin-top: 16rpx;
		padding: 0 32rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		.sizechoose {
			display: flex;
			line-height:44rpx;
			.readychoose {
				margin: 20rpx 0;
				font-weight:500;
			}
			.choosesize {
				margin: 20rpx 0;
				margin-left: 32rpx;
				font-weight:400;
			}
		}
		.choosepng,.gotopng {
			width: 50rpx;
			height: 50rpx;
			margin: 18rpx 0;
		}
	}
	
	// 商品详情
	.detailsmore {
		margin-top: 16rpx;
		padding: 32rpx;
		background-color: #FFFFFF;
		.detailsmoretitle {
			font-size:28rpx;
			font-weight:500;
			color:rgba(51,51,51,1);
			line-height:44rpx;
			margin-bottom: 30rpx;
		}
	}
	
	//购物车样式
	.buycar {
		box-sizing: border-box;
		position: fixed;
		padding: 0 0 0 32rpx;
		bottom: 0;
		width: 100%;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		.buyprice {
			display: flex;
			.buypricetxt {
				font-size:36rpx;
				font-weight:500;
				color:rgba(24,108,242,1);
				line-height:96rpx;
			}
			image {
				width: 46rpx;
				height: 46rpx;
				margin: 26rpx 12rpx 24rpx 0;
			}
			.badgecss {
				position: absolute;
				left: 62rpx;
				font-size: 12rpx;
				background-color: red;
				color: #FFFFFF;
				padding: 5rpx 10rpx;
				border-radius: 50%;
				text-align: center;
				top: 10rpx;
			}
		}
		.buybtn{
			text-align: center;
			line-height:96rpx;
			width:232rpx;
			height:96rpx;
			background:rgba(24,108,242,1);
		}
		
	}
</style>
